<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
</head>

<body>
            <div class="content">
                <div class="row">
                    <div class="col-sm-4 col-3">
                        <h4 class="page-title">员工</h4>
                    </div>
                    <div class="col-sm-8 col-9 text-right m-b-20">
                        <a href="add-employee.html" class="btn btn-primary float-right btn-rounded"><i class="fa fa-plus"></i> 新增员工</a>
                    </div>
                </div>
                <div class="row filter-row">
                    <div class="col-sm-6 col-md-3">
                        <div class="form-group form-focus">
                            <label class="focus-label">员工编号</label>
                            <input type="text" class="form-control floating">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <div class="form-group form-focus">
                            <label class="focus-label">员工姓名</label>
                            <input type="text" class="form-control floating">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <div class="form-group form-focus select-focus">
                            <label class="focus-label">角色</label>
                            <select class="select floating">
                                <option>选择角色</option>
                                <option>护士</option>
                                <option>药剂师</option>
                                <option>检验员</option>
                                <option>会计</option>
                                <option>接待员</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <a href="#" class="btn btn-success btn-block"> 搜索 </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
						<div class="table-responsive">
                            <table class="table table-striped custom-table">
                                <thead>
                                    <tr>
                                        <th style="min-width:200px;">姓名</th>
                                        <th>员工编号</th>
                                        <th>电子邮箱</th>
                                        <th>手机</th>
                                        <th style="min-width: 110px;">加入时间</th>
                                        <th>角色</th>
                                        <th class="text-right">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="employees">
                                </tbody>
                            </table>
						</div>
                    </div>
                </div>
            </div>
            
		<div id="delete_employee" class="modal fade delete-modal" role="dialog">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-body text-center">
						<h3>Are you sure want to delete this Employee?</h3>
						<div class="m-t-20"> <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
							<button type="submit" class="btn btn-danger">Delete</button>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
    <div class="sidebar-overlay" data-reff=""></div>
    
	<script src="assets/js/jquery-3.2.1.min.js"></script>
	<script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/dataTables.bootstrap4.min.js"></script>
    <script src="assets/js/jquery.slimscroll.js"></script>
    <script src="assets/js/select2.min.js"></script>
    <script src="assets/js/moment.min.js"></script>
    <script src="assets/js/bootstrap-datetimepicker.min.js"></script>
    <script src="assets/js/app.js"></script>
	<!--json data-->
	<script type="text/javascript" src="json/employees.json"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		var employeesStr = "";
		for(var i = 0; i < employees.length; i++){			
			employeesStr = employeesStr + '<tr>';
            employeesStr = employeesStr + '<td>';
			employeesStr = employeesStr + '<img width="28" height="28" src="assets/img/' + employees[i].img +'" class="rounded-circle" alt=""> <h2>' + employees[i].name +'</h2>';
			employeesStr = employeesStr + '</td>';
            employeesStr = employeesStr + '<td>' + employees[i].id + '</td>';
            employeesStr = employeesStr + '<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b6bbb5beb9b6a4bebab8b9bea497b2afb6baa7bbb2f9b4b8ba">' + employees[i].email + '</a></td>';
            employeesStr = employeesStr + '<td>' + employees[i].mobile + '</td>';
            employeesStr = employeesStr + '<td>' + employees[i].join + '</td>';
            employeesStr = employeesStr + '<td>';
			if(employees[i].status == 0){
				employeesStr = employeesStr + '<span class="custom-badge status-green">' + employees[i].role + '</span>';
			}else{
				employeesStr = employeesStr + '<span class="custom-badge status-grey">' + employees[i].role + '</span>';
			}
            employeesStr = employeesStr + '</td>';
            employeesStr = employeesStr + '<td class="text-right">';
            employeesStr = employeesStr + '<div class="dropdown dropdown-action">';
            employeesStr = employeesStr + '<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>';
            employeesStr = employeesStr + '<div class="dropdown-menu dropdown-menu-right">';
            employeesStr = employeesStr + '<a class="dropdown-item" href="edit-employee.html"><i class="fa fa-pencil m-r-5"></i> Edit</a>';
            employeesStr = employeesStr + '<a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_employee"><i class="fa fa-trash-o m-r-5"></i> Delete</a>';
            employeesStr = employeesStr + '</div>';
            employeesStr = employeesStr + '</div>';
            employeesStr = employeesStr + '</td>';
            employeesStr = employeesStr + '</tr>';
		}
		$("#employees").html(employeesStr);		
	});
	</script>
</body>

</html>